<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      @drag-sort="sortTable"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="">
        <el-button type="primary" :icon="Download" plain @click="downloadFile">导出数据</el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- content -->
      <template #content="{ row }">
        <span style="font-size: 12px; white-space: normal; word-break: break-word; display: inline-block; max-width: 200px">{{
          row.content
        }}</span>
      </template>
      <template #imageUrls="{ row }">
        <div style="display: flex; gap: 6px; justify-content: center; flex-wrap: wrap">
          <el-image
            v-for="(img, index) in row.imageUrls"
            :key="index"
            :src="img"
            style="width: 80px; height: 80px; border-radius: 6px"
            fit="cover"
            :preview-src-list="row.imageUrls"
            :initial-index="index"
            :preview-teleported="true"
          />
        </div>
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status === 0 ? 'danger' : row.status === 1 ? 'warning' : 'success'" disable-transitions>
          {{ row.status === 0 ? "未处理" : row.status === 1 ? "处理中" : "已处理" }}
        </el-tag>
      </template>

      <!-- usernameHeader -->
      <template #usernameHeader="scope">
        <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
          {{ scope.column.label }}
        </el-button>
      </template>
      <!-- createTime -->
      <template #createTime="scope">
        <el-button type="primary" link>
          {{ scope.row.createTime }}
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">回复</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <FeedBack ref="drawerRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive } from "vue";
import { Feedback, Items } from "@/api/interface";
import { useHandleData, useWarnData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import ShopsDawer from "@/views/system/departmentManage/components/ShopsDawer.vue";
import FeedBack from "../components/FeedBack.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { ItemShops, ItemsPost, ItemsPut, deleteItemId, ItemExport } from "@/api/modules/shops";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/components/Loading/fullScreen";
import { deleteById, postFeedbackList, putFeedBack } from "@/api/modules/feedback";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });

const dataCallback = (data: any) => {
  const baseUrl = import.meta.env.VITE_BACIL_IMG;
  data.records.forEach((item: any) => {
    item.imageUrls = item.imageUrls.map((url: string) => `${baseUrl}${url}`);
  });
  return {
    list: data.records,
    total: data.total
  };
};

const getTableList = (params: any) => {
  showFullScreenLoading();
  let newParams = JSON.parse(JSON.stringify(params));
  tryHideFullScreenLoading();
  console.log("object", newParams);
  return postFeedbackList(newParams);
};
// 表格配置项
const columns = reactive<ColumnProps<Feedback.ResFeedbackList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  { prop: "id", label: "反馈id" },
  { prop: "userId", label: "用户id" },
  { prop: "content", label: "反馈问题", width: 200, align: "center" },
  { prop: "imageUrls", label: "反馈图片" },
  { prop: "status", label: "处理状态" },
  {
    prop: "createdTime",
    label: "反馈时间"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 200 }
]);

// 表格拖拽排序
const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
  console.log(newIndex, oldIndex);
  console.log(proTable.value?.tableData);
  ElMessage.success("修改列表排序成功");
};

// 删除商品信息
const deleteAccount = async (params: Feedback.ResFeedbackList) => {
  await useHandleData(deleteById, params.id, `是否删除该反馈记录`);
  proTable.value?.getTableList();
};

// 导出商品列表
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(ItemExport, "数据", proTable.value?.searchParam)
  );
};

// 批量添加商品
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof FeedBack> | null>(null);
const openDrawer = (title: string, row: Partial<Feedback.ResFeedbackList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "回复" ? putFeedBack : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
